<!--
*@Author: 张童
*@Description: 应急
*@Date: 2024-09-19
-->
<template>
  <a-drawer :root-style="{ color: 'blue', }" 
    :bodyStyle="{ padding: '4px', }" 
    width="500px" 
    title="应急发布"
    placement="right" class="u-dept-notice-drawer" 
    :getContainer="getContainer" 
    v-bind="$attrs">
    <a-row justify="space-between" style="padding:1vw">
      <a-col>
        <u-icon-button itype="add" class="u-to-check-button" @click="showAdd = true">新增</u-icon-button>
      </a-col>
      <a-col>
        <div @click="gopush()" style="cursor: pointer;color: #0066FF ;">查看更多</div>
      </a-col>
    </a-row>
    <u-card class="f-h-100">
      <a-list :data-source="tabData">
        <template #renderItem="{ item }">
          <u-card :bordered="true" class="f-margin-b12 f-padding-t12" @click="getShowEdit(item.keyid)">
            <a-row class="f-margin-b12" 
              justify="space-between"
              style="font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              ">
              <span :style="{ color: item.bgcolor }">
                预警等级：{{ item.warnLevelLabel }}
              </span>

              <template v-if="(item['tgroupchatList'] || []).length != 0">
                <u-icon-font type="icon-zaixiangoutong" 
                  style="color: #1890ff; cursor: pointer"
                  :title="item['tgroupchatList'][0]['groupNames']"
                  @click.stop="chatEventBus.emit('openGroup', { ...item['tgroupchatList'][0], types: 1 })">
                </u-icon-font>
              </template>
            </a-row>
            <a-row class="f-margin-b12" style="font-family: PingFang SC, PingFang SC;
                  font-weight: 600;
                  font-size: 16px;
                  color: #333333;">
              {{ item.title }}
            </a-row>
            <a-row class="f-margin-b16" style="font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;">
              {{ item.content }}
            </a-row>
            <a-row class="f-w-100" align="middle">
              <a-col :span="8">
                <span style="font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;">
                  {{ item.warnTime ? dayjs(item.warnTime).format('YYYY-MM-DD') : '' }}
                </span>
              </a-col>
              <a-col :span="8">
                <a-row justify="center" align="middle">
                  <span style="font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;">
                    启用人：{{ userInfo.name }}
                  </span>
                </a-row>
              </a-col>
              <a-col :span="8">
                <a-row justify="end">
                  <u-icon-button itype="dismiss" class="u-to-check-button" v-if="item.relieveFlag == 0"
                    @click.stop="clickRelieve(item)">解除预警</u-icon-button>
                </a-row>
              </a-col>
            </a-row>
          </u-card>
        </template>
      </a-list>
      <!-- </a-tabs> -->
    </u-card>
  </a-drawer>
  
  <!-- 新增窗口 -->
  <EditAdd v-model:open="showAdd" style="width: 50vw;" @success="showAdd = false, getSearch()" />
  
  <!-- 详情窗口 -->
  <Edit v-model:open="showEdit" wrap-class-name="full-modal" :keyid="keyid" />
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, useAttrs, watch } from 'vue'
import EditAdd from './editAdd.vue'
import Edit from './edit.vue'
import { useRoute, useRouter } from 'vue-router'
import * as emergencyWarningApi from '@/service/emergencyWarning/index'
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { useLoginStore } from '@/store';
import { alertC, messageC } from '@/util/common'
import { warnEventBus, chatEventBus } from '@/util/eventBus'

const { userInfo } = storeToRefs(useLoginStore());
const router = useRouter()
const showAdd = ref(false)
const showEdit = ref(false)
const keyid = ref('')
const attrs = useAttrs()
const emits = defineEmits(["success", 'close', 'winLoading']);

// gif卡片背景色
const LevelArr = [
  {
    label: 'I级应急响应',
    bgcolor: '#F5222D',
    value: '1'
  },
  {
    label: 'II级应急响应',
    bgcolor: '#FA8C16',
    value: '2'
  },
  {
    label: 'III级应急响应',
    bgcolor: '#F3CC09',
    value: '3'
  },
  {
    label: 'IV级应急响应',
    bgcolor: '#1890FF',
    value: '4'
  }
]

// 列表数据
let tabData = ref([]);
let pagenation = reactive({
  total: 0,
  current: 1,
  size: 50,
})
let searchF = reactive<any>({
  model: {
    keywords: ''
  },
});
// 切割字符串
function lengthCutting(str, num) {
  let strArr = [];

  for (let i = 0;i < str.length;i += num) strArr.push(str.slice(i, i + num));
  return strArr;
}

// 查询数据
const getSearch = async (index?) => {
  let tform = JSON.parse(JSON.stringify(searchF));

  if (index == 1) {
    pagenation.current = 1
  }
  tform.current = pagenation.current
  tform.size = pagenation.size
  const res = await emergencyWarningApi.page({ ...tform })
  if (res.code == 0) {
    tabData.value = res.data.records
    tabData.value.map(e => {
      if (e.warnTime) {
        e.warnTime = dayjs(e.warnTime).format('YYYY-MM-DD HH:mm')
      }
      if (e.content) {
        if (e.content.length > 60) {
          e.content = lengthCutting(e.content, 60)[0] + '...'
        }
      }
      if (e.title) {
        if (e.title.length > 20) {
          e.title = lengthCutting(e.title, 20)[0] + '...'
        }
      }
      LevelArr.map(index => {
        if (e.warnLevel == index.value) {
          e.warnLevelLabel = index.label
          e.bgcolor = index.bgcolor
        }
      })
    })
  }
};

// 打开详情
const getShowEdit = (index?: string) => {
  keyid.value = index
  showEdit.value = true
}


const clickRelieve = async (item?) => {
  const res = await emergencyWarningApi.updata({ keyid: item.keyid, relieveFlag: 1 })
  if (res.code == 0) {
    alertC(res.msg, 'success')
    getSearch()
    warnEventBus.emit('getWrnLevel')
    // emits('winLoading')
  } else {
    alertC(res.msg, 'warning')
  }
}

const getContainer = () => {
  let activePane: HTMLElement = document.querySelector('.ant-tabs-tabpane-active')
  if (activePane) {
    return activePane
  }
  return document.body
}

// 跳转
const gopush = () => {
  emits('close')
  router.push({
    path: '/TransitIndex/EmergencyWarning',
    query: {
      _tab: '1',
      label: '应急发布'
    }
  })
}

watch(() => attrs.open, async (val, nav) => {
  if (val) {
    await getSearch()
  }
})

</script>

<style lang='scss'>
.u-dept-notice-drawer {
  .ant-tabs-tabpane {
    padding: 16px 6px;

    .u-to-check-button {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1890FF;
      background: rgba(24, 144, 255, 0.2);
    }
  }
}
</style>